<template>
	<view>
		<view class="gl-header">
			<view class="gl-header-left">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="refresh"></uni-search-bar>
				<uni-data-select v-model="curMaxMode" :localdata="maxModeData" emptyTips="没有" label="选择大类"
					placeholder="所有大类" style="width: 300px;" @change="maxModeChange"></uni-data-select>

			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-success" @tap="EventButtonNew()">
					<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">新增</text>
				</view>
				<!--
				<view class="gl-button gl-button-warning" @tap="EventButtonEdit">
					<uni-icons type="compose" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">编辑</text>
				</view>
				
				<view class="gl-button gl-button-error" @tap="EventTest">
					<uni-icons type="trash" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">移除</text>
				</view>
				-->
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
				<!--
				<uni-icons :type=" showLine?'images':'list'" size="24" @tap="lineChange"></uni-icons>
				-->
			</view>
		</view>

		<view class="gl-body table-container" style="background-color: #f8f8f8;font-size: x-small;"
			:style="{height:swiperH+'px'}">
			<uni-table type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="48">ID</uni-th>
					<uni-th>名称</uni-th>
					<uni-th>别名</uni-th>
					<uni-th width="48">产品数量</uni-th>
					<uni-th width="48">排序</uni-th>
					<uni-th width="48">状态</uni-th>
					<uni-th>操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in mixModeData" :key="index">
					<uni-th>{{item.id}}</uni-th>
					<uni-th>
						<view style="display: flex;align-items: center;gap: 10px;">
							<image :src="sConf.cos + item.face" mode="aspectFit"
								style="width: 32px;height: 32px;border-radius: 5px;"></image>
							<text>{{item.name}}</text>
						</view>
					</uni-th>
					<uni-th>{{item.note}}</uni-th>
					<uni-th>{{item.trade}}</uni-th>
					<uni-th>{{item.hot}}</uni-th>
					<uni-th>
						<switch :checked="Boolean(item.status)" style="transform:scale(0.7)"
							@change="EventStateChange(item)" />
					</uni-th>
					<uni-th>
						<uni-icons type="compose" size="24" color="#007aff" @tap="EventButtonNew(item)"></uni-icons>
					</uni-th>
				</uni-tr>
			</uni-table>
		</view>

		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>
	</view>
	<!-- 编辑分类 -->
	<uni-popup ref="popupMode">
		<view class="gl-popup-view">
			<view class="gl-popup-title">
				<view class=""> 商品分类 </view>
				<uni-icons class="gl-button-mini gl-button-error" type="closeempty" size="18" color="#fff"
					@tap="EventClose"></uni-icons>
			</view>
			<view class="gl-popup-body" style="display: flex;align-items: center;gap: 10px;">
				<view class="" style="padding: 20px;background-color: #00000033;border-radius: 5px;">
					<image :src="sConf.cos + curModeData.face" mode="aspectFit" @click="EventCosIcon"
						style="width: 64px;height: 64px;border-radius: 5px;background-color: #fff;"></image>
				</view>
				<view class="" style="display: flex;flex-direction: column;gap: 5px;">
					<view class="" style="display: flex;">
						<uni-data-select v-model="curModeData.parent" :localdata="maxModeData" emptyTips="没有"
							label="选择大类" placeholder="默认大类" style="width: 250px;"
							@change="maxModeEditChange"></uni-data-select>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view class="gl-label-text">分类名称：</view>
						<uni-easyinput v-model="curModeData.name" placeholder="请输入分类名称" />
					</view>

					<view class="" style="display: flex;align-items: center;">
						<view class="gl-label-text">倒序排序：</view>
						<uni-number-box v-model="curModeData.hot" :min="0" :max="999"></uni-number-box>
					</view>
				</view>
			</view>
			<view class="gl-popup-foot" style="display: flex;justify-content: flex-end;gap: 10px;">
				<view class="gl-button gl-button-base" @tap="EventSubmit">
					<uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">保存</text>
				</view>
				<view class="gl-button gl-button-warning" @tap="EventClose">
					<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">取消</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import psCos from '@/common/psCos';
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页					
				search: '',
				maxModeData: [], // 大类
				mixModeData: [], // 小类
				curMaxMode: 0,
				curMaxModeEdit: 0,
				curModeData: {
					id: null,
					name: null,
					face: '/media/default/default.png',
					parent: 0,
					hot: 10
				},
			}
		},
		mounted() {
			console.log('页面挂载');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData()
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			loadDefData() {
				this.refresh()
			},
			maxModeChange(e) {
				console.log('maxModeChange', e);
				this.refresh()
			},
			refresh() {
				let host = this.sConf.host + '/admin/cargoMode/';
				let token = this.sConf.auth.token || '';
				let data = {
					page: this.page,
					size: this.size,
					ordering: '-hot',
					parent: this.curMaxMode || 0
				}
				if (this.search.length > 0) {
					data.search = this.search
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载商品分类列表', res);
					if (res.rescode === 200) {
						this.mixModeData = res.resmsg;
						this.count = res.count;
						this.size = res.size;
						if (this.curMaxMode === 0) {
							let tmpData = []
							res.resmsg.forEach(item => {
								tmpData.push({
									value: item.id,
									text: item.name
								})
							})
							this.maxModeData = tmpData;
						}
					}
				}).catch(err => {
					console.log('err', err);
					if (err.rescode === 404) {
						this.page--
					}
				});
			},
			EventStateChange(e) {
				console.log('EventStateChange', e);
				e.status = Boolean(e.status) ? 0 : 1
				this.curModeData = e
				this.EventRequestPatch()
			},
			EventButtonNew(e = {
				id: null,
				name: null,
				face: '/media/default/default.png',
				parent: 0,
				hot: 10
			}) {
				this.curModeData = e;
				this.$nextTick(() => {
					this.$refs.popupMode.open()
				})
			},
			EventClose() {
				this.$refs.popupMode.close()
			},
			EventSubmit() {
				if (!this.curModeData.name) {
					uni.showToast({
						title: '名称不能为空'
					})
					return
				}
				let that = this;
				uni.showModal({
					title: "商品分类",
					content: "是否需要提交商品分类 => " + that.curModeData.name,
					success(res) {
						if (res.confirm) {
							if (!that.curModeData.id) {
								that.EventRequestPost()
							} else {
								that.EventRequestPatch()
							}
							that.EventClose()
						}
					}
				})
			},
			EventRequestPost() {
				let host = this.sConf.host + '/admin/cargoMode/'
				let token = this.sConf.auth.token
				let data = this.curModeData
				psMethod.authenticatorPostSync(host, token, data).then(res => {
					if (res.rescode === 200) {
						uni.showToast({
							title: '提交成功'
						})
						this.refresh()
					} else {
						uni.showModal({
							content: res.rescode + ' ' + res.resmsg,
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '提交失败'
					})
				})
			},
			EventRequestPatch() {
				let host = this.sConf.host + '/admin/cargoMode/' + this.curModeData.id + '/'
				let token = this.sConf.auth.token
				let data = this.curModeData
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					if (res.rescode === 200) {
						uni.showToast({
							title: '提交成功'
						})
						this.refresh()
					} else {
						uni.showModal({
							content: res.rescode + ' ' + res.resmsg,
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '提交失败'
					})
				})
			},
			EventCosIcon() {
				console.log('上传图片');
				let that = this;
				psCos.hasTest({
						host: this.sConf.host,
						token: this.sConf.auth.token,
						path: 'icon'
					})
					.then(res => {
						that.curModeData.face = res;
					}).catch(err => {
						uni.showModal({
							title: '失败',
							content: '上传图标失败',
							showCancel: false
						})
					})
			},
			maxModeEditChange(e) {
				this.curModeData.parent = e || 0;
			}

		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>